import React, {Component} from 'react'
import {ScrollView, StatusBar,TouchableOpacity, StyleSheet, View, Text} from 'react-native'
import ScrollableTabView, {DefaultTabBar,} from 'react-native-scrollable-tab-view'
import Spinner from 'react-native-loading-spinner-overlay'
import {connect} from 'react-redux'
import { createAction, NavigationActions } from '../../utils'
import TimeChooser from '../home/components/TimeChooser'
import color from '../../utils/color'
import screen from "../../utils/screen";
import AnalysisReport from './sub/AnalysisReport'
import BusinessReport from './sub/BusinessReport'
import ProblemReport from './sub/ProblemReport'

@connect(({ statistics, loading }) => ({ ...statistics, isLoading: loading.models.statistics }))
export default class Statistics extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: '经营报告',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerTitleStyle: {
      color: 'white',
      fontSize: screen.pxToDp(30),
      marginLeft: screen.pxToDp(26),
    },
    headerRight: (
      <TouchableOpacity onPress={() => {
        navigation.navigate('Login')
      }}>
        <View style={{marginRight: screen.pxToDp(20), height: screen.pxToDp(50)}}>
          <Text style={{color: 'white'}}>退出</Text>
        </View>
      </TouchableOpacity>
    ),
  })
  constructor(props) {
    super(props)
  }

  componentDidMount() {
  }

  changeDate = (type, sTime, eTime) => {
    this.props.dispatch(createAction("statistics/changeTime")({
      mainTime: {
        timeType: type,
        startTime: sTime,
        endTime: eTime
      }
    }))
  }

  render() {
    const {  mainTime, isLoading } = this.props
    console.log('statistics mainTime', mainTime)
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor={color.theme} />
        <Spinner visible={isLoading} />
        <TimeChooser changeDate={this.changeDate} initTime={mainTime}/>
        <ScrollableTabView
          tabBarBackgroundColor={color.theme}
          tabBarActiveTextColor="#00195e"
          tabBarInactiveTextColor="#268db8"
          tabBarTextStyle={{
            fontSize: screen.pxToDp(30),
            fontWeight: 'normal',
          }}
          renderTabBar={() => <DefaultTabBar />}
        >
          <View style={{flex: 1}} tabLabel="企业经营报告">
            <BusinessReport navigation={this.props.navigation} />
          </View>
          <ScrollView tabLabel="问题报告">
            <ProblemReport />
          </ScrollView>
        </ScrollableTabView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})
